<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>添加订阅</title>
        <%- include('../layout/common-css.html');%>
        <link rel="stylesheet" type="text/css" href="/amazeui/css/amazeui.toast.css">
        <style type="text/css">
            .btn{
                cursor: pointer;
            }
            .des{
                width: 100%;
                height: 15rem;
                overflow:auto;
            }
        </style>
    </head>
    <body>
        <%- include('../layout/header.html');%>
        <div class="am-panel am-panel-default">
            <div class="am-panel-hd" style="text-align: center;">
                    <h3 class="am-panel-bd">添加订阅数据（分类：<%if(!category || category=='SOME'){%>精选<%}else if(category=='ALL'){%>所有<%}else{%><%=category%><%}%>）</h3>
            </div>
            <div class="am-panel-bd">
                <div class="am-g" style="margin-left: 0;padding-left: 0;">
                  <div class="am-u-sm-4" style="margin-left: 0;padding-left: 0;">
                      <em><%=result['list'].length%></em>条记录
                  </div>
                  <div class="am-u-sm-8">
                        <form class="am-form am-form-inline" method="get">
                        <div class="am-form-group">
                            <select name="category" id="category" data-am-selected>
                                <optgroup label="所有类别">
                                    <option value="SOME" <%if(category=='SOME'){%> selected<%}%>>精选</option>
                                    <option value="ALL" <%if(category=='ALL'){%> selected<%}%>>所有</option>
                                </optgroup>
                                <%for(let z of data_zone){%>
                                  <optgroup label="<%=z['name']%>">
                                    <%for(let c of z['categories']){%>
                                        <option value="<%=c%>" <%if(category==c){%> selected<%}%>><%=c%></option>
                                    <%}%>
                                  </optgroup>
                                <%}%>
                            </select>
                        </div>
                        <div class="am-form-group">
                            <input type="text" name="keyword" class="am-form-field am-round"<%if(keyword){%> value="<%=keyword%>"<%}%> placeholder="请输入关键词查询"/>
                        </div>
                        <div class="am-form-group">
                            <button type="submit" class="am-btn am-btn-primary am-radius">查询</button>
                        </div>
                    </form>
                  </div>
                </div>

                <ul class="am-avg-sm-1 am-avg-md-2 am-avg-lg-3" style="margin-top: 2rem;">
                    <%for(let d of result['list']){%>
                    <li style="padding: 1rem;" id="p_<%=d['_id']%>">
                        <div class="am-panel am-panel-warning">
                          <div class="am-panel-hd">
                            <div class="am-fl"><strong><%=d['name']%></strong><%if(!category || category == 'ALL' ||  category == 'SOME'){%>【<%=d['category']%>】<%}%></div>
                            <div class="am-fr">
                                <a href="javascript:add2fav('<%=d['_id']%>')" target="_blank"><i class="am-icon-plus am-icon-sm"></i></a>
                            </div>
                            <div class="am-cf"></div>
                          </div>
                          <div class="am-panel-bd">

                            <div class="des"><%-d['description'].replace(/\n/ig,'<br/>')%></div>
                            
                            <div class="am-fr am-comment-meta">
                                <%=d['schedule_peroid_des']%>更新&nbsp;&nbsp;&nbsp;&nbsp;<a href="/datas/view/<%=d['_id']%>?name=<%=d['name']%>&category=<%=d['category']%>" target="_blank"><i class="am-icon-external-link">查看数据</i></a>
                            </div>

                            <div class="am-cf"></div>
                          </div>
                        </div>
                    </li>
                    <%}%>

                </ul>

                <ul class="am-pagination">
                    <%if(result['pagenum']>0){%>
                    <li>
                        <a href="?pagenum=<%=(result['pagenum']-1)%>&keyword=<%=keyword%>&category=<%=category%>">上一页</a>
                    </li>
                    <%}%>
                    <%for(var i=result['page_min_num'];i<=result['page_max_num'];i++){%>
                    <li <%if(result['pagenum']===i){%>class="am-active"<%}%>>
                        <a href="?pagenum=<%=i%>&keyword=<%=keyword%>&category=<%=category%>"><%=i%></a>
                    </li>
                    <%}%>
                    <%if(result['pagenum'] < result['page_count']){%>
                    <li>
                        <a href="?pagenum=<%=(result['pagenum']+1)%>&keyword=<%=keyword%>&category=<%=category%>">下一页</a>
                    </li>
                    <%}%>
                </ul>

            </div>
            
        </div>
        <%- include('../layout/bottom-js.html');%>
        <script type="text/javascript" src="/amazeui/js/amazeui.toast.js"></script>
        <script type="text/javascript">
            var add2fav = function(id){
                $.ajax({
                    method: "POST",
                    url: "",
                    data: { 'id':id }
                  })
                  .done(function(msg) {
                    if(msg.success && msg.add){
                        $('body').toast({
                            text: '添加订阅成功',
                            duration: 1000,
                            type:'success'
                        });
                        $('#p_'+id).fadeOut();
                    }else {
                        $('body').toast({
                            text: '添加订阅失败',
                            duration: 1000,
                            type:'success'
                        });
                    }
                  });
            }
        </script>
</body>
</html>